<template>
	<view>
		<uni-forms ref="form" :modelValue="current" :rules="rules" validate-trigger="bind" err-show-type="undertext">
			<view class="page-foot bg-white">
				<view class="foot-wrap flex-box flex-between m-hairline--top">
					<view class="foot-btn2" @click="submit(2)">提交</view>
				</view>
			</view>
			<view class="container">
				
				<view class="plr30">
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 m-hairline--bottom">
								<view class="fs30 col89 mb25">销售代表</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
					
					<picker mode="date" :value="decorationDate" @change="decorationDatePicker">
						<view class="pb30 m-hairline--bottom">
							<uni-forms-item name="fixturestime">
								<input v-model="current.fixturestime" type="text" hidden></input>
								<view class="fs30 col89 mb30">接访日期</view>
								<view class="m-arrow-right fs30 col3">
									{{current.fixturestime.length > 0 ? current.fixturestime : '请选择'}}
								</view>
							</uni-forms-item>
						</view>
					</picker>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">客户姓名</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">性别</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in sexArr">
								<view class="label" @click="checkSexType(index)" :class="index==sexIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">联系方式</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">客户需求面积(㎡)</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">位置</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index1) in posiArr">
								<view class="label" @click="checkPosiType(index1)" :class="index1=posiIndex?'active':''">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">带看小区</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					<view class="pb30">
						<view class="fs30 col89 mb30">建筑风格</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					<view class="pb30">
						<view class="fs30 col89 mb30">建筑形式</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">园林</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">车库/位需求量</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">价格意愿</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">置业周期</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">付款方式</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">到访途径</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">约访次数</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
					<view class="pb30">
						<view class="fs30 col89 mb30">购房需求</view>
						<view class="label-list flex-box flex-wrap">
							<block v-for="(item,index) in houseType">
								<view class="label" @click="checkType(index)" :class="index==houseTypeIndex?'active':''" style="padding: 0 20rpx;width: unset;">
									{{item.name}}
									<image class="icon-select" src="/static/icon/icon_gou.png" mode="aspectFit"></image>
								</view>
							</block>
						</view>
					</view>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">纠结原因</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
					<view class="pb30">
						<uni-forms-item name="name">
							<view class="pt50 pb30 m-hairline--bottom">
								<view class="fs30 col89 mb25">沟通状态</view>
								<input type="text" v-model="current.name" class="heading" placeholder="请填写" />
							</view>
						</uni-forms-item>
					</view>
					
				</view>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	const core = require('@/xilu/core.js');
	export default {
		data() {
			return {
				//性别
				sexArr:[
					{
						id:1,
						name:'男'
					},
					{
						id:2,
						name:'女'
					},
				],
				sexIndex:0,
				sexid:1,
				//位置
				posiArr:[
					{
						id:1,
						name:'新区',
					},
					{
						id:2,
						name:'老区',
					},
					{
						id:3,
						name:'新区老区交界',
					},
				],
				posiIndex:0,
				posiid:1,
			
				
				rental_id: 0,
				userinfo:{},
				village: [], //小区
				comment: [], //标签
				rentalMode:[], //租赁模式,
				rentalModeIndex:0,
				houseType: [], //房源类型
				houseTypeIndex: -1,
				images:[],
			}
		},
		onReady: function() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.fetchUserInfo();
			this.rental_id = options.rental_id || 0;
			if(this.rental_id){
				this.fetchDetail();
			}else{
				this.fetchRentalMode();
				this.fetchTags();
				this.fetchHouseType();
			}
			let that = this;
			uni.$on("chooseVillage",function(data){
				that.village = data;
				that.current.village_id = data.id;
			})
		},
		onUnload(){
			uni.$off("chooseVillage");
		},
		methods: {
			// 性别
			checkSexType(index) {
				this.sexIndex = index;
				this.sexid = this.sexArr[index].id;
			},
			checkPosiType(index){
				this.posiIndex = index;
				this.posiid = this.posiArr[index].id
			},
			
			fetchUserInfo(){
				let that = this;
				core.get({url:'/api/xiluhouse.user/index',data:{},success:(ret)=>{
					that.userinfo = ret.data;
				},loading:false});
			},
			fetchDetail(){
				let that = this;
				core.get({url:'/api/xiluhouse.broker/rental_detail',data:{rental_id: that.rental_id},success:(ret)=>{
					that.current = ret.data;
					that.images = ret.data.images_arr;
					that.village = ret.data.village2;
					that.fetchRentalMode();
					that.fetchTags();
					that.fetchHouseType();
				},loading:false});
			},
			
			//获取租赁模式
			fetchRentalMode() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.common/rental_mode',
					success: ret => {
						if(that.rental_id){
							for(let i=0;i<ret.data.length;i++){
								if(ret.data[i].id == that.current.rental_mode_id){
									that.rentalModeIndex = i;
									break;
								}
							}
						}
						that.rentalMode = ret.data;
					}
				});
			},
			//选择房屋类型
			checkRentalMode(index) {
				this.rentalModeIndex = index;
				this.current.rental_mode_id = this.rentalMode[index].id
			},
			//获取房屋属性
			fetchHouseType() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.common/house_type',
					success: ret => {
						if(that.rental_id){
							for(let i=0;i<ret.data.length;i++){
								if(ret.data[i].id == that.current.house_type_id){
									that.houseTypeIndex = i;
									break;
								}
							}
						}
						that.houseType = ret.data;
					}
				});
			},
			//选择房屋类型
			checkType(index) {
				this.houseTypeIndex = index;
				this.current.house_type_id = this.houseType[index].id
			},
			//获取标签属性
			fetchTags() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.common/rental_tags',
					data: {
						pageSize: 15
					},
					success: ret => {
						if(that.rental_id){
							let house_tag_ids = that.current.house_tag_ids ? that.current.house_tag_ids.split(','): [];
							if(house_tag_ids.length>0){
								for(let i=0;i<ret.data.length;i++){
									for(let j=0;j<ret.data[i].tags.length;j++){
										if(house_tag_ids.indexOf(ret.data[i].tags[j].id.toString()) !== -1){
											ret.data[i].tags[j].is_check = true;
										}
									}
									
								}
							}
						}
						this.comment = ret.data
					}
				});
			},
			//选择标签属性
			choose(index, s_index) {
				let that = this;
				let data = that.comment
				let tags = data[index].tags
				if (data[index].multi_status == 2) {
					tags[s_index].is_check = !tags[s_index].is_check
				} else {
					tags.forEach(function(v, v_index) {
						if (v_index == s_index) {
							v.is_check = true
						} else {
							v.is_check = false
						}
					})
				}
				data[index].tags = tags
				that.comment = data;
				this.$forceUpdate();
			},
			
			
			delImg(index) {
				let images = this.images
				images.splice(index, 1)
				this.images = images
			},
			//选择是否委托
			checkPublic(type) {
				this.current.is_public = type
			},
			
			decorationDatePicker(e) {
				this.current.fixturestime = e.detail.value
			},
			buildDatePicker(e) {
				this.current.buildingtime = e.detail.value
			},
			
			submit(type) {
				let that = this;
				that.$refs.form.validate(valid => {
					if (!valid) {
						let form = that.current;
						if (form.village_id <= 0) {
							uni.showToast({title: '请选择小区',icon: "none"})
							return false;
						}
						if (form.house_type_id <= 0) {
							uni.showToast({title: '请选择房源类型',icon: "none"})
							return false;
						}
						if (form.price <= 0) {
							uni.showToast({title: '请填写价格',icon: "none"})
							return false;
						}
						let images = that.images;
						if (images.length <= 0) {
							uni.showToast({title: '请上传房源图片',icon: "none"})
							return false;
						}
						form['images'] = images.join(',');
						let comment = that.comment;
						let ids = [];
						comment.forEach(function(item) {
							let id = item.id
							item.tags.forEach(function(v) {
								if (v.is_check == true) {
									ids.push({
										tag_type_id: id,
										tag_id: v.id
									})
								}
							})
						})
						form['tag'] = ids;
						if (type == 1) {
							form['status'] = 'hidden';
						} else {
							form['status'] = 'normal';
						}
						core.post({
							url: 'api/xiluhouse.broker/add_rental',
							data: form,
							loading:true,
							success: ret => {
								uni.showToast({
									title: ret.msg,
									icon: 'none',
									success:function (){
										uni.$emit("refreshRental",{})
										uni.navigateBack({
											delta: 1
										})
									}
								});
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},

			
		},
		
	}
</script>

<style scoped lang="less">
	.icon-search {
		padding: 5rpx;
		display: block;
		width: 40rpx;
		height: 40rpx;
	}


	.upload .item {
		position: relative;
		margin: 0 30rpx 30rpx 0;
		width: 200rpx;
		height: 156rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.upload .item:nth-of-type(3n) {
		margin: 0 0 30rpx;
	}

	.upload .item.btn {
		padding: 36rpx 0 0;
		background: #F7F9FC;
	}

	.upload .icon {
		margin: 0 auto 7rpx;
		display: block;
		width: 45rpx;
		height: 45rpx;
	}

	.upload .img {
		display: block;
		width: 200rpx;
		height: 156rpx;
	}

	.upload .icon-clear {
		position: absolute;
		right: 13rpx;
		top: 13rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		z-index: 10;
	}


	.upload-box {
		position: relative;
		width: 750rpx;
		height: 500rpx;
		background: #F7F9FC;

		.icon-upload {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 183rpx;
			height: 140rpx;
			z-index: 1;
		}

		.img {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 750rpx;
			height: 500rpx;
			z-index: 2;
		}
	}

	.heading {
		width: 690rpx;
		height: 88rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #101010;
		line-height: 44rpx;
	}

	.label-list {
		.label {
			position: relative;
			margin: 0 20rpx 20rpx 0;
			
			width: 150rpx;
			height: 66rpx;
			background: #F8F9FB;
			border-radius: 4rpx;
			border: 1px solid #EEEEEE;
			font-size: 26rpx;
			color: #333333;
			line-height: 66rpx;
			text-align: center;

			.icon-select {
				position: absolute;
				right: 0;
				bottom: -1rpx;
				display: none;
				width: 31rpx;
				height: 28rpx;
			}
		}

		.label:nth-of-type(4n) {
			margin: 0 0 20rpx;
		}

		.label.active {
			color: var(--normal);
			border: 1px solid var(--normal);

			.icon-select {
				display: block;
			}
		}
	}

	.page-foot {
		.foot-wrap {
			padding: 10rpx 60rpx;

			.foot-btn1 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1px solid var(--normal);
				font-size: 30rpx;
				color: var(--normal);
				line-height: 80rpx;
				text-align: center;
			}

			.foot-btn2 {
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				background: var(--normal);
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
	.pb30{
		padding:0;
		width:100%;
	}
</style>
